<template>
  <div>
    <span style="color:#b0b0b0 " class="demonstration">
      <i class="el-icon-date"></i>
      选择学期：</span
    >
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange"
    ></el-cascader>
    <el-select
      @change="handleChange_week"
      v-model="week_begin"
      clearable
      placeholder="请选择"
    >
      <el-option
        v-for="item in options_week"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div id="coursesTable"></div>
  </div>
</template>

<script>
import Timetables from "timetables";
import { get_kebiao, get_xq } from "@/api/sys.user.js";
import dayjs from "@/libs/dayjs.min.js";
import util from "@/libs/util.js";
export default {
  data() {
    return {
      timetables: [
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""]
      ],
      timetableType: [
        [{ index: "1", name: "8:20" }, 1],
        [{ index: "2", name: "9:30" }, 1],
        [{ index: "3", name: "10:30" }, 1],
        [{ index: "4", name: "11:30" }, 1],
        [{ index: "5", name: "12:30" }, 1],
        [{ index: "6", name: "14:30" }, 1],
        [{ index: "7", name: "15:30" }, 1],
        [{ index: "8", name: "16:30" }, 1],
        [{ index: "9", name: "17:30" }, 1],
        [{ index: "10", name: "18:30" }, 1],
        [{ index: "11", name: "19:30" }, 1],
        [{ index: "12", name: "20:30" }, 1]
      ],
      tableData: [],
      options: [],
      timetable: null,
      options_week: [
        { value: 1, label: "第一周" },
        { value: 2, label: "第二周" },
        { value: 3, label: "第三周" },
        { value: 4, label: "第四周" },
        { value: 5, label: "第五周" },
        { value: 6, label: "第六周" },
        { value: 7, label: "第七周" },
        { value: 8, label: "第八周" },
        { value: 9, label: "第九周" },
        { value: 10, label: "第十周" },
        { value: 11, label: "第十一周" },
        { value: 12, label: "第十二周" },
        { value: 13, label: "第十三周" },
        { value: 14, label: "第十四周" },
        { value: 15, label: "第十五周" },
        { value: 16, label: "第十六周" },
        { value: 17, label: "第十七周" },
        { value: 18, label: "第十八周" },
        { value: 19, label: "第十九周" }
      ],
      week_begin: 1,
      ke_arr: [],
      value: 242,
      arr: ""
    };
  },
  mounted() {
    const timetableType = [
      [{ index: "1", name: "8:20" }, 1],
      [{ index: "2", name: "9:30" }, 1],
      [{ index: "3", name: "10:30" }, 1],
      [{ index: "4", name: "11:30" }, 1],
      [{ index: "5", name: "12:30" }, 1],
      [{ index: "6", name: "14:30" }, 1],
      [{ index: "7", name: "15:30" }, 1],
      [{ index: "8", name: "16:30" }, 1],
      [{ index: "9", name: "17:30" }, 1]
    ];
    const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    const highlightWeek = new Date().getDay();
    const styles = {
      Gheight: 70,
      leftHandWidth: 80,
      palette: ["#FC5C7D", "#6A82FB"]
    };

    // 实例化(初始化课表)
    this.timetable = new Timetables({
      el: "#coursesTable",
      timetables: this.timetables,
      week: week,
      timetableType: timetableType,
      highlightWeek: highlightWeek,
      gridOnClick: function(e) {
        alert(
          e.name +
            "  " +
            e.week +
            ", 第" +
            e.index +
            "节课, 课长" +
            e.length +
            "节"
        );
        console.log(e);
      },
      styles: styles
    });
    this.get_kebiao1(242, 1);
  },
  methods: {
    //计算当前周
    DateDiff(sDate1, sDate2) {
      //sDate1和sDate2是2002-12-18格式
      var aDate, oDate1, oDate2, iDays;
      aDate = sDate1.split("-");
      oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2002格式
      aDate = sDate2.split("-");
      oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      return iDays;
    },

    handleChange_week(value) {
      this.render_course(this.ke_arr, this.arr);
    },
    //获取课表数据
    handleChange(value) {
      console.log(value);
      this.get_kebiao1(value[1], 1);
    },
    get_kebiao1(value, week) {
      get_kebiao({
        semesterId: value,
        week: week
      }).then(res => {
        console.log(res);
        //数据处理
        this.ke_arr = res.data.value;
        this.arr = res.data.ke;
        this.render_course(res.data.value, this.arr);
      });
    },
    //设置起始日期获取当前为第几周

    //渲染课程
    render_course(arr, ke) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      this.timetables = [
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", "", "", "", "", ""]
      ];
      loading.close();
      for (var i = 0; i < arr.length; i++) {
        //   this.timetables[0][4] = arr[1].value.name;
        //循环去掉偶数位的=和奇数位的+
        for (var j = 0; j < arr[i].value.pai6.length; j += 2) {
          //    console.log(j)
          var y2 = parseInt(arr[i].value.pai6[j][0].split("=")[1]);
          var x2 = parseInt(arr[i].value.pai6[j + 1][0].split("+")[1]);
          var name = arr[i].value.name.replace(/\\"|\"/g, "");
          var id = arr[i].value.id.replace(/\\"|\"/g, "");
          var room = arr[i].value.room.replace(/\\"|\"/g, "");

          var week = arr[i].value.week.replace(/\\"|\"/g, "");
          console.log(week);
          //          * 对教学周占用串进行缩略表示 marsh a string contain only '0' or '1' which named
          //  * "vaildWeeks" with length 53
          //  * 00000000000000000100000000000000000000000000000000000|
          //缩略连续周
          var vaildWeeks = [];
          for (var k = 0; k < week.length; k++) {
            if (week[k] == "1") {
              vaildWeeks.push(k);
            }
          }

          //辨别当前周
          var teacher1 = null;
          for (let j = 0; j < ke.length; j++) {
            console.log(id);
            if (ke[j].name == name) {
              teacher1 = ke[j].teacher;
            }
          }
          for (let i = 0; i < vaildWeeks.length; i++) {
            if (vaildWeeks[i] == this.week_begin) {
              if (teacher1 == null) teacher1 = "未知";
              this.timetables[y2][x2] =
                name + "(" + teacher1 + "）\n " + id + " \n" + room;
            }
          }

          console.log(vaildWeeks);

          // srr[y2][x2] = name + "\n " + id + " \n" + room;
        }
      }

      this.timetable.setOption({
        timetables: this.timetables
      });
    },

    get_xq1() {
      get_xq({ cookie: util.cookies.get("JSESSIONID") }).then(res => {
        //json字符串转json对象
        //实例化json

        console.log(res.data.semesters);
        //提取选项

        // let options = res.data.semesters.map(item => {
        //   return {
        //     value: item.semesterId,
        //     label: item.semesterName
        //   };
        // });
        //对象转数组
        var options = [];
        let arr = Object.values(res.data.semesters);
        console.log(arr.length);
        for (let i = 0; i < arr.length; i++) {
          console.log(arr[i]);
          this.options.push({
            value: arr[i][0].schoolYear,
            label: arr[i][0].schoolYear,
            children: arr[i].map(item => {
              return {
                value: item.id,
                label: item.name == 1 ? "上学期" : "下学期"
              };
            })
          });
        }
        console.log(this.options);
      });
    }
  },

  created() {
    let day = "2022-02-21";
    let nowM = dayjs().format("YYYY-MM-DD"); // 获取现在的月份
    let days = this.DateDiff(day, nowM)/7
    this.week_begin= parseInt(days+1) 
    this.get_xq1();
  }
};
</script>

<style>
.coursesTable {
  transition: all 1s;
}
.course-hasContent {
  border-radius: 10px;
  text-align: center;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 过渡 */
  transition: all 1s;
  /* 视图变化 */
  font-size: 1vw;
  /* 渐进变化 */
}
.Courses-head {
  text-align: center;
  color: rgb(170, 162, 162);
}
.Courses-leftHand {
  text-align: center;
  color: rgb(170, 162, 162);
}

.left-hand-1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-4 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-5 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-6 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.left-hand-7 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.Courses-content ul {
  border-bottom: 1px solid #e5e5e5;
  transition: all 1s;
}
.d2-theme-container-main-body {
  transition: all 1s;
}
</style>
